<template>
  <el-button @click="handleAdd"> 添加 </el-button>
  <SLCard class="SL_card">
    <SLTable class="SL_table" :columns="tableColums"> </SLTable>
  </SLCard>
  <SLDialog v-model="dialogVisible" :text="dialogTitle" :show-comfirm="true" :confirm="submitForm">
    <SLForm
      v-if="dialogVisible"
      ref="ruleForm"
      :submit="saveStorage"
      :columns="dialogColums"
      :set-submit-params="setSubmitParams"
    />
  </SLDialog>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import { getSpecificationList, saveStorage } from '@/api/component/index'
import SLCard from '@/components/SLCard/index.vue'
import SLForm from '@/components/SLForm/index.vue'
import SLDialog from '@/components/SLDialog/index.vue'
import SLTable from '@/components/SLTable/index.vue'
import { initAddComponentCloums } from '@/views/component/storage/index'
import { ISaveItem } from '@/common/types/component/storage'
export default defineComponent({
  name: 'TestComp',
  components: { SLCard, SLForm, SLTable, SLDialog },
  setup() {
    const state = reactive<{
      dialogVisible: boolean
      dialogTitle: string
      dialogColums: AOUCloumn[]
      tableColums: CTColum[]
    }>({
      dialogVisible: false,
      dialogColums: [],
      dialogTitle: '',
      tableColums: [
        { prop: 'code', label: '备件编号' },
        { prop: 'name', label: '备件名称' },
        { prop: 'type', label: '备件类别' },
        { prop: 'specification', label: '规格型号' },
        { prop: 'unit', label: '单位' },
        { prop: 'number', label: '数量' }
      ]
    })

    const typeList = ref<SelectOption[]>([])
    const ruleForm = ref<InstanceType<typeof SLForm>>()
    const handleAdd = () => {
      state.dialogColums = initAddComponentCloums(typeList.value)
      state.dialogVisible = true
      state.dialogTitle = '添加备件'
    }
    const setSubmitParams = (params: ISaveItem) => {
      console.log(params)
      if (params.type.length) {
        params.type = params.type.toString()
      }
      return params
    }
    const refreshData = () => {
      console.log('refreshdata')
    }
    const submitForm = () => {
      debugger
      return ruleForm.value?.handleSubmit()
    }
    const SpecificationList = async () => {
      const res = await getSpecificationList()
      typeList.value = res.data.map(item => {
        return { label: item, value: item } as SelectOption
      })
    }
    onMounted(() => {
      SpecificationList()
    })
    return {
      ...toRefs(state),
      ruleForm,
      setSubmitParams,
      refreshData,
      handleAdd,
      submitForm,
      saveStorage
    }
  }
})
</script>

<style lang="scss" scoped>
.SL_card {
  height: 100%;
  flex: auto;
  // flex: 1;
  margin-top: 0;
  ::v-deep .el-card__body {
    display: flex;
    flex-direction: column;
    padding-top: 0;
    padding-left: 0px;
    padding-right: 0px;
  }
  .SL_table{
    height: 100%;
    height: calc(100% - 60px);
    flex: auto;
    // border: none;
  }
  .operation-btn-box {
    width: 100%;
    display: flex;
    .operation-btn {
      margin-right: 12px;
      font-size: 16px !important;
    }
  }
  .pagination {
    margin: 15px 0 10px 20px;
    text-align: left;
  }
  .table-cell {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 16px;
  }
  .el-table__row {
    td {
      padding: 0;
      height: 56px;
      line-height: 56px;
    }
  }
  .iconfont::before {
    font-size: 14px !important;
  }
}
</style>
